<template>
	<view class="v-album">
		<view
			class="v-album__row"
			ref="v-album__row"
			v-for="(arr, index) in showUrls"
			:forComputedUse="albumWidth"
			:key="index"
		>
			<view
				class="v-album__row__wrapper"
				v-for="(item, index1) in arr"
				:key="index1"
				:style="[imageStyle(index + 1, index1 + 1)]"
				@tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
			>
				<image
					:src="getSrc(item)"
					:mode="
						urls.length === 1
							? imageHeight > 0
								? singleMode
								: 'widthFix'
							: multipleMode
					"
					:style="[
						{
							width: imageWidth,
							height: imageHeight,
						},
					]"
				></image>
				<view
					v-if="
						showMore &&
						urls.length > rowCount * showUrls.length &&
						index === showUrls.length - 1 &&
						index1 === showUrls[showUrls.length - 1].length - 1
					"
					class="v-album__row__wrapper__text"
				>
					<v-text
						:text="`+${urls.length - maxCount}`"
						color="#fff"
						:size="multipleSize * 0.3"
						align="center"
						customStyle="justify-content: center"
					></v-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin("dom");
// #endif

/**
 * Album 相册
 * @description 本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码
 *
 * @property {Array}           urls             图片地址列表 Array<String>|Array<Object>形式
 * @property {String}          keyName          指定从数组的对象元素中读取哪个属性作为图片地址
 * @property {String | Number} singleSize       单图时，图片长边的长度  （默认 180 ）
 * @property {String | Number} multipleSize     多图时，图片边长 （默认 70 ）
 * @property {String | Number} space            多图时，图片水平和垂直之间的间隔 （默认 6 ）
 * @property {String}          singleMode       单图时，图片缩放裁剪的模式 （默认 'scaleToFill' ）
 * @property {String}          multipleMode     多图时，图片缩放裁剪的模式 （默认 'aspectFill' ）
 * @property {String | Number} maxCount         取消按钮的提示文字 （默认 9 ）
 * @property {Boolean}         previewFullImage 是否可以预览图片 （默认 true ）
 * @property {String | Number} rowCount         每行展示图片数量，如设置，singleSize和multipleSize将会无效	（默认 3 ）
 * @property {Boolean}         showMore         超出maxCount时是否显示查看更多的提示 （默认 true ）
 *
 * @event    {Function}        albumWidth       某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送  （回调参数 width ）
 * @example <v-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></v-album>
 */
export default {
	name: "v-album",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			// 单图的宽度
			singleWidth: 0,
			// 单图的高度
			singleHeight: 0,
			// 单图时，如果无法获取图片的尺寸信息，让图片宽度默认为容器的一定百分比
			singlePercent: 0.6,
		};
	},
	watch: {
		urls: {
			immediate: true,
			handler(newVal) {
				if (newVal.length === 1) {
					this.getImageRect();
				}
			},
		},
	},
	emits: ["albumWidth"],
	computed: {
		imageStyle() {
			return (index1, index2) => {
				const { space, rowCount, multipleSize, urls } = this,
					{ addUnit, addStyle } = uni.$u,
					rowLen = this.showUrls.length,
					allLen = this.urls.length;
				const style = {
					marginRight: addUnit(space),
					marginBottom: addUnit(space),
				};
				// 如果为最后一行，则每个图片都无需下边框
				if (index1 === rowLen) style.marginBottom = 0;
				// 每行的最右边一张和总长度的最后一张无需右边框
				if (
					index2 === rowCount ||
					(index1 === rowLen &&
						index2 === this.showUrls[index1 - 1].length)
				)
					style.marginRight = 0;
				return style;
			};
		},
		// 将数组划分为二维数组
		showUrls() {
			const arr = [];
			this.urls.map((item, index) => {
				// 限制最大展示数量
				if (index + 1 <= this.maxCount) {
					// 计算该元素为第几个素组内
					const itemIndex = Math.floor(index / this.rowCount);
					// 判断对应的索引是否存在
					if (!arr[itemIndex]) {
						arr[itemIndex] = [];
					}
					arr[itemIndex].push(item);
				}
			});
			return arr;
		},
		imageWidth() {
			return uni.$u.addUnit(
				this.urls.length === 1 ? this.singleWidth : this.multipleSize
			);
		},
		imageHeight() {
			return uni.$u.addUnit(
				this.urls.length === 1 ? this.singleHeight : this.multipleSize
			);
		},
		// 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
		// 因为用户在某些特殊的情况下，需要让文字与相册的宽度相等，所以这里事件的形式对外发送
		albumWidth() {
			let width = 0;
			if (this.urls.length === 1) {
				width = this.singleWidth;
			} else {
				width =
					this.showUrls[0].length * this.multipleSize +
					this.space * (this.showUrls[0].length - 1);
			}
			this.$emit("albumWidth", width);
			return width;
		},
	},
	methods: {
		// 预览图片
		onPreviewTap(url) {
			const urls = this.urls.map((item) => {
				return this.getSrc(item);
			});
			uni.previewImage({
				current: url,
				urls,
			});
		},
		// 获取图片的路径
		getSrc(item) {
			return uni.$u.test.object(item)
				? (this.keyName && item[this.keyName]) || item.src
				: item;
		},
		// 单图时，获取图片的尺寸
		// 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
		// 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
		getImageRect() {
			const src = this.getSrc(this.urls[0]);
			uni.getImageInfo({
				src,
				success: (res) => {
					// 判断图片横向还是竖向展示方式
					const isHorizotal = res.width >= res.height;
					this.singleWidth = isHorizotal
						? this.singleSize
						: (res.width / res.height) * this.singleSize;
					this.singleHeight = !isHorizotal
						? this.singleSize
						: (res.height / res.width) * this.singleWidth;
				},
				fail: () => {
					this.getComponentWidth();
				},
			});
		},
		// 获取组件的宽度
		async getComponentWidth() {
			// 延时一定时间，以获取dom尺寸
			await uni.$u.sleep(30);
			// #ifndef APP-NVUE
			this.$uGetRect(".v-album__row").then((size) => {
				this.singleWidth = size.width * this.singlePercent;
			});
			// #endif

			// #ifdef APP-NVUE
			// 这里ref="v-album__row"所在的标签为通过for循环出来，导致this.$refs['v-album__row']是一个数组
			const ref = this.$refs["v-album__row"][0];
			ref &&
				dom.getComponentRect(ref, (res) => {
					this.singleWidth = res.size.width * this.singlePercent;
				});
			// #endif
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.v-album {
	@include flex(column);

	&__row {
		@include flex(row);
		flex-wrap: wrap;

		&__wrapper {
			position: relative;

			&__text {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.3);
				@include flex(row);
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>
